import React    from 'react';
import ReactDOM from 'react-dom';
import pickerDateRange  from './dateRange.js';
import $  from 'jquery';
import  './dateRange.scss';


class MyDateRange extends React.Component {
  static propTypes = {
    onscallback: React.PropTypes.func
  };

  constructor(props) {
    super(props);
    let today = new Date();
    let month = today.getMonth() + 1;
    let todaystr = today.getFullYear() + "-" + (month > 10 ? month : "0" + month) + "-" + today.getDate();
    this.state = {
      startDate: todaystr,
      endDate: todaystr,
      triggerId: 'trigger' + (new Date()).getTime(),
      titleId: "title" + (new Date()).getTime()
    };
  }

  componentWillMount() {
    setTimeout(this.initDateRange.bind(this), 0);
  }

  initDateRange() {
    let that = this;
    let options = {
      isTodayValid: true,
      startDate: this.state.startDate,
      endDate: this.state.endDate,
      defaultText: ' 至 ',
      stopToday: false,
      inputTrigger: this.state.triggerId,
      success: (json)=> {
        that.props.onscallback(json);
      }
    }

    this.DateRange = new pickerDateRange(this.state.titleId, options);
  }

  render() {
    return (
      <div className="ta_date" >
        <span className="date_title" id={this.state.titleId}>{ this.state.startDate } 至 { this.state.endDate }</span>
        <a className="opt_sel" href="javascript:void(0)" id={this.state.triggerId}>
          <i className="i_orderd"></i>
        </a>
      </div>
    )
  }
}

export default MyDateRange;
